柱状图

一个最简单的折线图的配置中需要包括一个grid、两个axis分别为x和y，以及series中的bar，示例如下，可在官网中直接运行

        myChart = D3Charts.init('chart');

        var x = [];
        var y = [];

        for (var i = 1; i < 32; i++) {
            x.push('3月' + i + '日');
            y.push(Math.random() * 400 + 50);
        }

        myChart.setOption({
            grid: {}, // grid配置
            series: [
                {
                    type: 'bar', // 图表类型
                    data: y, // 数据
                    name: '销量', // name
                    itemStyle: {
                        normal: {
                            fill: '#53A8E2'
                        }
                    }
                }
            ],
            // dataZoom: {}, // 可以控制axis的start和end
            axis: [
                {
                    position: 'bottom', // axis的放置位置
                    type: 'band', // 柱状图x轴的类型只能是band！
                    data: x, // 数据
                    // $dataZoomIndex: 0,
                },
                {
                    position: 'left', // axis的放置位置
                    type: 'linear', // 柱状图y轴类型只能是linear！
                    xOrY: 'y' // 作为y轴，默认为x轴
                }
            ],
            // axisPointer: [
            //     {
            //     }
            // ],
            // tooltip: [
            //     {
            //         trigger: 'axis',
            //         $axisIndex: 0
            //     }
            // ]
        });

组件详细配置项如下，每个配置项都有一个默认值：

        //data: undefined, // {Array} 系列中的数据内容数组。数组项通常为具体的数据项。数据项格式同echarts类似，http://echarts.baidu.com/option.html#series-bar.data
        $dataIndex: undefined, // {number} 依赖的$data的index，格式同上，优先级低于data，取得的数据需符合data的格式
        dataKey: undefined, // {string|number} 搭配$dataIndex使用，方便从依赖的$data中取数据，等同于 data.map((d) => d[dataKey])，最终取得的数据需符合data的格式
        $axisIndex: [0, 1], // {Array} 所依赖axis的index，需包括一个x轴和y轴
        name: undefined, // {string} 系列名称，用于tooltip的显示，legend 的图例筛选

        // bar样式
        itemStyle: {
            // 普通样式
            normal: {},
            // 高亮样式
            emphasis: {}
        },

        // 标签
        label: {
            normal: {
                show: false, // {boolean} 普通状态是否显示
                formatter: undefined, // {Function} 文本格式化函数
                style: {
                    position: 'inside',
                    fill: 'black'
                }
            },
            emphasis: {
                show: false, // {boolean} 高亮状态是否显示
                style: {}
            }
        },

        // 柱间连接区域配置
        joinArea: {
            show: false, // 是否显示柱间连接区域
            // 连接区域样式
            style: {
                fill: 'rgba(12, 55, 256, 0.3)'
            },
            showLabel: true, // {boolean} 是否显示label
            // label样式
            labelStyle: {},
            formatter: undefined // {Function} label格式化函数
        },

        barType: 'rect', // {string} bar的展示类型 rect | cuboid | candlestick | shadowRect | waterfall | boxplot
        selectedList: [], // {Array} 选中项，使用数据下标指定
        enableSelect: false, // {boolean|string} 是否开启选中, single(true) | multiple | false
        onZero: true, // {boolean} 起始点是否从0开始
        xLookAngle: 30, // {number} barType为cuboid或shadowRect时有效，x方向观察角度
        yLookAngle: 30, // {number} barType为cuboid或shadowRect时有效，y方向观察角度
        rectMin: 0, // {number} rect的最小高度，仅适用于rect类型barType
        rectWidth: 10, // {number} rect的宽度，仅适用于x轴为连续类型坐标轴（linear、time等）
        legendHoverLink: true, // {boolean} 是否与图例进行高亮联动
        stack: undefined, // {string} 堆叠名，设置后堆叠名相同将以堆叠形式展示
        overlap: undefined, // {string} 重叠名，设置后重叠名相同将以重叠形式展示
        hideZero: false, // {boolean} 是否隐藏0值得柱形

        cursor: 'default', // {string} 鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
        zlevel: 0, // {number} 所有图形的 zlevel 值
        z: 2, // {number} 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
        animation: true, // {boolean} 是否开启动画。
        animationDuration: 500, // {number} 初始动画的时长
        animationEasing: 'cubicOut' // {string} 初始动画的缓动效果。不同的缓动效果可以参考 http://www.echartsjs.com/gallery/editor.html?c=line-easing。